<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <header>
        <div class="header">
          <h3>使用指南</h3>
          <span style="color: #3d7eff; cursor: pointer" @click="isShow">
            {{ !show ? '关闭' : '打开' }}指南
          </span>
        </div>
        <ol :class="{ noShow: show }">
          <li>工作日历，即设置不同岗位人员上班/休息的工作时间。</li>
          <li>配置工作日历之前，要先配置工作类型。</li>
          <li>支持为不同的部门/人员，设置不同的工作日历</li>
        </ol>
      </header>
      <main>
        <a-space
          class="table-header"
          style="justify-content: space-between; margin-bottom: 18px"
          fill
        >
          <a-input-search
            v-model="keyword"
            placeholder="请输入考勤组名称"
            @search="tableRef?.loadData()"
            @press-enter="tableRef?.loadData()"
          />
          <a-button
            type="primary"
            @click="
              router.push({
                name: 'EditWorkingCalendar'
              })
            "
          >
            新增工作日历
          </a-button>
        </a-space>
        <TableTurn
          :args="{
            rowSelection: {
              type: 'checkbox',
              showCheckedAll: true,
              onlyCurrent: false
            }
          }"
          :tableData="getTableData"
          ref="tableRef"
        >
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="工作日历名称"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="使用范围"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="工作日历类型"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="同步国家节假日安排"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="操作"
          >
            <template #cell="{ record }">
              <a-tooltip content="编辑">
                <IconFont
                  type="icon-edit"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="edit(record)"
                />
              </a-tooltip>
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-font
                    type="icon-delete"
                    :size="26"
                    :style="{
                      cursor: 'pointer',
                      marginRight: '10px'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-table-column>
        </TableTurn>
      </main>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  GetWorkCalendarList,
  DelWorkCalendar
} from '@/apis/attendance/base-setting/index';
import { useRouter } from 'vue-router';
import type TTableTurn from '@/components/TableTurn/type';
const title = '工作日历';
const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '工作日历'];
const show = ref(true);
const keyword = ref('');
const tableRef = ref<TTableTurn>();

const router = useRouter();

const isShow = () => {
  show.value = !show.value;
};
const getTableData = async (pageData: any) => {
  try {
    const res = await GetWorkCalendarList({ ...pageData, name: keyword.value });
    return res;
  } catch (error) {
    console.log(error);
    return [];
  }
};
const edit = (data: any) => {
  localStorage.setItem('calendarData', JSON.stringify(data));
  router.push({
    name: 'EditWorkingCalendar'
  });
};
const del = async (id: number) => {
  try {
    console.log(tableRef.value?.selectedListData, tableRef.value?.selectedList);
    if (
      tableRef.value?.selectedList &&
      tableRef.value?.selectedList.length !== 0
    ) {
      await DelWorkCalendar({ ids: tableRef.value?.selectedList });
    } else await DelWorkCalendar({ ids: [id] });
    tableRef.value?.loadData();
  } catch (error) {
    console.log(error);
  }
};
// https://date.nager.at/api/v3/publicholidays/2023/cn
// https://date.appworlds.cn/year/2023
</script>
<style lang="less" scoped>
.wrap {
  header {
    .header {
      display: flex;
      align-items: center;
      h3 {
        margin-right: 20px;
      }
    }
    ol {
      margin: 0;
      height: 80px;
      overflow: hidden;
      transition: all 0.5s;
    }
    .noShow {
      height: 0px;
    }
    ol > li {
      margin-bottom: 10px;
      flex: 1;
    }
  }
}
</style>
